import 'package:flutter/material.dart';
import '../../util/system_util.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import '../../util/screen_util.dart';
import '../../pages/square/banner_slider.dart';
import '../../pages/square/category.dart';
import '../../pages/square/header.dart';
import '../../pages/square/square_list.dart';
import '../../widgets/global_navigation_bar.dart';


const items=[
  {'id': 0, 'title': '推荐', 'color': null},
  {'id': 1, 'title': '官方', 'color': null},
  {'id': 2, 'title': '精品', 'color': 0xffe7aa5a},
  {'id': 3, 'title': '欧美', 'color': null},
  {'id': 4, 'title': '电子', 'color': null},
  {'id': 5, 'title': '流行', 'color': null},
  {'id': 6, 'title': '乡村', 'color': null},
  {'id': 7, 'title': '其他', 'color': null},
];

const listItems=[
  {'id': 11, 'img': 'assets/tmp_cover_1.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 12, 'img': 'assets/tmp_cover_2.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 13, 'img': 'assets/tmp_cover_3.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 14, 'img': 'assets/tmp_cover_4.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 15, 'img': 'assets/tmp_cover_5.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 16, 'img': 'assets/tmp_cover_6.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 17, 'img': 'assets/tmp_cover_1.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 18, 'img': 'assets/tmp_cover_2.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 19, 'img': 'assets/tmp_cover_3.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 20, 'img': 'assets/tmp_cover_4.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 21, 'img': 'assets/tmp_cover_5.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
  {'id': 22, 'img': 'assets/tmp_cover_6.jpg', 'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'},
];


class squarePage extends HookWidget {
  const squarePage({super.key});

  @override
  Widget build(BuildContext context) {
    setStatusBarStyle(Brightness.light);
    // var args=ModalRoute.of(context)?.settings.arguments as Map;
    var screen=Screen(context);
    final categoryID=useState(items[0]['id']);
    // print(args);

    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                )
            ),
            Container(
              height: screen.calc(860),
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color(0xff959a99),
                      Colors.white
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  )
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: screen.top+screen.calc(7)),
              child: Column(
                children: [
                  Header(),
                  Category(items: items, value: categoryID.value as int, onChanged: (id){
                    categoryID.value=id;
                  }),
                  BannerSlider(),
                  SquareList(items: listItems),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: GlobalNavigationBar(
        value: 2,
      ),
    );
  }
}
